<template>
  <div id="new-login" class="stepper">
    <div class="upper">
      <div class="title" v-if="loginMode==='captcha'">手机快捷登录</div>
      <div class="title" v-if="loginMode==='password'">账号密码登录</div>
    </div>
    <div class="desc" v-if="loginMode==='captcha'">新用户使用快捷登录将自动注册</div>
    <div class="desc" v-if="loginMode==='password'">用手机号和密码登录，新用户请验证码登录</div>
    <div class="input-field">
      <md-field class="phone-input">
        <md-field-item>
          <md-input-item
            name="phone"
            data-vv-name="手机号"
            ref="phoneInput"
            v-model="phone"
            v-validate="'required|phone'"
            placeholder="请输入您的手机号"
            :maxlength="11"
            type="phone"
            size="large"
          ></md-input-item>
        </md-field-item>
      </md-field>
    </div>
    <div class="goto-password">
      <a v-if="loginMode==='captcha'" @click="changeLoginMode('password')">密码登录</a>
      <a v-if="loginMode==='password'" @click="changeLoginMode('captcha')">验证码登录</a>
    </div>
    <md-button @click="login" :disabled="phone===''">下一步</md-button>
    <div class="agreement">
      登录即代表阅读并同意
      <router-link to="/useragreement">《用户服务协议》</router-link>和
      <router-link to="/options/privacy">《隐私政策》</router-link>
    </div>
  </div>
</template>
<script>
import { Field, InputItem, FieldItem, Button, Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Utils from '@/common/pakjUtils';
import WxUtils from '@/common/weixinUtils';

export default {
  name: 'phone-login',
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      phone: '',
      action: undefined
    };
  },
  created() {
    const query = this.$route.query;
    if (query.action) {
      this.action = query.action;
    }
    if (query.mode) {
      this.$store.commit('setLoginMode', query.mode);
    }
    if (Utils.getCurrentEnv() === 'wx' && this.action !== 'reg') {
      if (window.location.host.indexOf('h5') >= 0) {
        WxUtils.startWxAuth();
      }
      return;
    }
  },
  methods: {
    changeLoginMode(mode) {
      this.$store.commit('setLoginMode', mode);
    },
    login() {
      this.$validator.validateAll().then(res => {
        if (this.errors.has('手机号')) {
          Toast({
            content: this.errors.all()[0],
            duration: 2000,
            hasMask: true
          });
          return;
        } else {
          this.$store.commit('setCurrentPhone', this.phone);
          if (this.loginMode === 'captcha') {
            let q = {};
            if (this.action === 'reg') {
              q.action = 'reg';
            }
            this.$router.push({
              name: 'LoginCaptcha',
              query: this.$route.query
            });
          } else if (this.loginMode === 'password') {
            this.$store
              .dispatch('getUserByPhone', this.phone)
              .then(() => {
                this.$router.push({
                  name: 'LoginPassword',
                  query: this.$route.query
                });
              })
              .catch(reason => {
                if (reason.message === 'captcha') {
                  this.$router.push({
                    name: 'LoginCaptcha',
                    query: {
                      next: 'SetLoginPassword'
                    }
                  });
                }
              });
          }
        }
      });
    }
  },
  computed: {
    ...mapGetters(['loginMode'])
  }
};
</script>
<style lang="stylus">
#new-login {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 68px;
  }

  .goto-password {
    font-size: 26px;
    font-weight: 500;
    color: rgba(255, 105, 23, 1);
    line-height: 26px;
    margin-bottom: 86px;
  }

  .agreement {
    font-size: 22px;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
    line-height: 32px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .input-field {
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E0E0;

    .left {
      margin-left: 0px !important;
    }

    .md-field-item-inner {
      padding: 0 0;
    }

    .md-field-item {
      padding: 0 0;
    }

    .md-input-item {
      padding: 0 0;

      ::-moz-placeholder {
        color: color-text-caption;
      }

      ::-webkit-input-placeholder {
        color: color-text-caption;
      }

      :-ms-input-placeholder {
        color: color-text-caption;
      }
    }
  }
}
</style>
